自我挑戰的第二十二天，最後一公里！

Day 22: 巨型選單(Mega Menu)

接續上一篇文章中所提到的導覽列，當你用比較多的內容無法縮減至一排時，可以考慮使用這個導覽列的變體-巨型選單(或是有些人稱之為Fat Navigation)。

• 使用在當網站有很多分類內容，然後各分類底下又有很多頁面，可能有三層以上的結構時可以使用。
• 這種選單可以用來呈現網站中所有子頁面，水平展開來放置連結項目。
• 巨型選單是一種漸進式揭露，不讓User一開始就直接看到數量龐大且複雜的次要頁面，直到他們點選了選單的標題，才會展開。
• 在製作選單時，可以考慮詳細規劃每個區域連結的分類，讓User更容易找到或發現他們想去的頁面，分類可以依照內容或是時間、字母順序來安排。

我們接著來看看這種選單長什麼樣子，

首先，可以看到Paypal的導覽列選單，在點擊商業銷售解決方案的按鈕之後，會打開一個佔滿整個頁面寬度的選單，而在這個選單中，再分為三個大群組（中小企業、企業、更多），而每一個群組標籤底下，都有被歸納好的頁面標題，方便User一目了然的就可以找到他想要去的頁面。

第二個例子是台灣星巴克的首頁，當User把滑鼠移動到導覽列的按鈕上方時，會因為滑鼠的hover打開了Mega Menu，我們也可以看到在商品列表底下，先分類成飲品、糕點、咖啡用品、設備、隨行卡，而每一個分類底下，再分成該類的子項目頁面，這樣分類的方式與各類的寬度距離都非常容易理解誰和誰是歸納在同一類型底下的。

另外，對於滑鼠hover到導覽列上會出現選單的部分，Nielsen Norman Group的文章中有提到，設置為hover 0.5秒後再出現選單比較合適，防止了畫面不斷閃爍，與確認User就是真的要選擇這個選項，而不是滑鼠剛好路過而已。

最後一個例子是國泰世華銀行的官網，點選產品介紹會展開一個有這五個分類的巨型選單，跟前面不一樣的地方是，該選單的寬度沒有佔滿該頁面的寬度，但分類組別的間隔還是非常好讓人理解子項目頁面的歸類組別。

(順帶一提，看到目前我覺得國泰世華銀行的官網與APP的美感和使用者體驗都相當不錯，各位如果有看到更美的銀行官網頁面請推薦我～）沒有要業配只是想讚嘆而已

最後一樣是補充可以直接使用的資源：

• MDBootstrap的Mega Menu

其他參考：

• Github上關於Mega menu的project